<style>
    .table > tbody > tr > td > label.asterisk:after {
        content: " *";
        color: red;
    }
    .form-copy {
        width: 200px;
        margin-right: 5px;
        border-radius: 0;
        box-shadow: none;
        padding: 4px 12px 7px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        border: 1px solid #ccc;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .select2 {
        margin-right: 5px
    }
</style>
<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h6 style="font-weight: bolder">订单信息</h6>
        <table class="table">
            <tbody>
            <tr>
                <td style="text-align: right;width: 100px;">
                    <label class="asterisk" style="padding-top: 8px;">订单渠道</label>
                </td>
                <td style="text-align: left;">
                    &nbsp;&nbsp;C端用户 <input class="grid-row-radio" style="margin-right:5px;" type="radio" name="order_channel" checked value="1">&nbsp;&nbsp;
                    &nbsp;&nbsp;B端平台 <input class="grid-row-radio" style="margin-right:5px;" type="radio" name="order_channel" value="2">&nbsp;&nbsp;
                    <span style="margin-top: 5px;margin-left:20px;margin-bottom: 10px;color: #737373;"><i class="fa fa-info-circle"></i>&nbsp;请选择订单渠道 (默认订单渠道为: C端用户)</span>
                </td>
                <td></td>
            </tr>

            <tr>
                <td style="text-align: right;">
                    <label class="asterisk" style="padding-top: 8px;">订单类型</label>
                </td>
                <td style="text-align: left;">
                    普通订单 <input class="grid-row-radio" style="margin-right:5px;" type="radio" name="order_type" checked value="1">&nbsp;&nbsp;
                    寄样订单 <input class="grid-row-radio" style="margin-right:5px;" type="radio" name="order_type" value="2">&nbsp;&nbsp;
                    <span style="margin-top: 5px;margin-left:20px;margin-bottom: 10px;color: #737373;"><i class="fa fa-info-circle"></i>&nbsp;请选择订单类型 (默认订单类型为: 普通订单)</span>
                </td>
                <td></td>
            </tr>

            <tr>
                <td style="text-align: right;">
                    <label class="asterisk" style="padding-top: 8px;">订单平台</label>
                </td>
                <td style="text-align: left;">
                    @foreach(\App\Models\Basics\SysPlat::options() as $plat_id => $title)
                        {{--@continue($plat_id== 0)--}}
                        &nbsp;&nbsp; {{ $title }} <input class="grid-row-radio" style="margin-right:5px;" type="radio" name="plat_id" {{ $plat_id == 1 ? 'checked' : '' }}  value="{{ $plat_id }}"> &nbsp;&nbsp;
                    @endforeach
                    <span style="margin-top: 5px;margin-left:20px;margin-bottom: 10px;color: #737373;"><i class="fa fa-info-circle"></i>&nbsp;请选择订单平台 (默认订单平台为: Amazon)</span>

                </td>
                <td></td>

            </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h6 style="font-weight: bolder">收货人信息</h6>
        <div class="box-body table-responsive no-padding">
            <table class="table">
                <tbody>
                <tr>
                    <td style="text-align: right;width: 100px;">
                        <label class="asterisk" style="padding-top: 8px;">国家</label>
                    </td>
                    <td style="text-align: left;width: 200px;">
                        <input type="text" class="form-copy" name="country" placeholder="国家">
                    </td>
                    <td style="text-align: right;width: 100px;">
                        <label class="asterisk" style="padding-top: 8px;" >收货人</label>
                    </td>
                    <td style="text-align: left;">
                        <input type="text" class="form-copy" name="receiver" placeholder="收货人">
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="table">
                <tbody>
                <tr>
                    <td style="text-align: right;width: 100px;">
                        <label class="asterisk" style="padding-top: 8px;">收货地址</label>
                    </td>
                    <td colspan="3" style="text-align: left;">
                        <input type="text" class="form-copy" style="width: 520px;" name="address" placeholder="收货地址">
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="table">
                <tbody>
                <tr>
                    <td style="text-align: right;width: 100px;">
                        <label style="padding-top: 8px;">订单号</label>
                    </td>
                    <td style="text-align: left;width: 500px;">
                        <input type="text" class="form-copy" name="order_no" placeholder="订单号">
                        <span style="margin-top: 5px;margin-bottom: 10px;color: #737373;"><i class="fa fa-info-circle"></i>&nbsp;若有订单号，请务必输入订单号</span>
                    </td>
                    <td></td>
                </tr>
                </tbody>
            </table>
            <table class="table">
                <tbody>
                <tr>
                    <td style="text-align: right;width: 100px;">
                        <label style="padding-top: 8px;">州</label>
                    </td>
                    <td style="text-align: left;width: 200px;">
                        <input type="text" class="form-copy" name="state" placeholder="州">
                    </td>
                    <td style="text-align: right;width: 100px;">
                        <label style="padding-top: 8px;" >城市</label>
                    </td>
                    <td style="text-align: left;">
                        <input type="text" class="form-copy" name="city" placeholder="城市">
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="table">
                <tbody>
                <tr>
                    <td style="text-align: right;width: 100px;">
                        <label style="padding-top: 8px;">邮编</label>
                    </td>
                    <td style="text-align: left;width: 200px;">
                        <input type="text" class="form-copy" name="postcode" placeholder="邮编">
                    </td>
                    <td style="text-align: right;width: 100px;">
                        <label style="padding-top: 8px;" >电话</label>
                    </td>
                    <td style="text-align: left;">
                        <input type="text" class="form-copy" name="phone" placeholder="电话">
                    </td>
                </tr>
                </tbody>
            </table>
            <table class="table">
                <tbody>
                <tr>
                    <td style="text-align: right;width: 100px;">
                        <label style="padding-top: 8px;">税号</label>
                    </td>
                    <td colspan="3" style="text-align: left;">
                        <input type="text" class="form-copy" style="width: 520px;" name="cpf" placeholder="税号">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    #dvThead {
        background-color: #f0f0f0;
    }
    #dvThead .table {
        margin-bottom: 0;
    }
    #dvThead .table thead{
        background-color: #f0f0f0;
        text-align: center;
    }
    #dvThead .table thead th{
        text-align: center;
    }
    #dvTbody {
        max-height: 350px;
        overflow: auto;
    }
    #dvTbody .table tbody td{
        text-align: center;
    }
</style>

<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h6 style="font-weight: bolder">发货信息</h6>
        <table class="table">
            <tbody>
            <tr>
                <td style="text-align: right;width: 100px;">
                    <label class="asterisk" style="padding-top: 8px;">发货国家</label>
                </td>
                <td style="text-align: left;width: 500px;">
                    <select id="country_id" name="country_id">
                        {{ getOptions(\App\Models\Basics\SysCountry::options()) }}
                    </select>
                    <span style="margin-top: 5px;margin-bottom: 10px;color: #737373;"><i class="fa fa-info-circle"></i>&nbsp;请选择平台发货国家</span>
                </td>
                <td></td>
            </tr>
            </tbody>
        </table>

    </div>
</div>

<div class="box box-solid no-margin box-show">
    <div class="box-body">
        <h6 style="font-weight: bolder">发货商品</h6>
        <div class="box-body table-responsive no-padding">
            <div class='form-inline margin'>
                <div id="dvThead" style="padding-right:17px">
                    <table class="table">
                        <thead>
                        <tr>
                            <th style="width: 25%">SKU</th>
                            <th style="width: 35%">产品名称</th>
                            <th style="width: 25%">下单数量</th>
                            <th style="width: 15%">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div id="dvTbody">
                    <table class="table table-hover" id="table-detail">
                        <tbody>
                        </tbody>
                    </table>
                </div>
                <button type="button" class="btn btn-xs btn-info" id="add-table-detail"><i class="fa fa-plus"></i>&nbsp;&nbsp;Add sku</button>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    {{ csrf_field() }}
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
    <button type="button" id="ppc-form" class="btn btn-primary">提交</button>
</div>
<template id="table-detail-tpl">
    <tr>
        <td style="width:25%"><select style="width:100%" name="param[__index__][psku_id]" class="gird-sku-select"></select></td>
        <td style="width:35%;padding-right: 2%;padding-top: 16px;"></td>
        <td style="width:25%;padding-right: 2%;padding-top: 16px;"><input type="text" class="form-control integer_num_" placeholder="下单数量" name="param[__index__][apply_num]"></td>
        <td style="width:15%;padding-right: 2%;padding-top: 16px;"><a class="btn btn-xs btn-danger table-detail-remove"><i class="fa fa-trash"></i> remove</a></td>
    </tr>
</template>
<script language="JavaScript" type="text/javascript">
    function checkCodOForm(){
        let country = $('input[name="country"]').val();
        if(country.trim() == ''){
            swal('收货国家不能为空', '', 'error');
            return false;
        }
        let receiver = $('input[name="receiver"]').val();
        if(receiver.trim() == ''){
            swal('收货人不能为空', '', 'error');
            return false;
        }
        let address = $('input[name="address"]').val();
        if(address.trim() == ''){
            swal('收货地址不能为空', '', 'error');
            return false;
        }

        let country_id = $('#country_id option:selected').val();
        if(country_id == ''){
            swal('发货国家不能为空', '', 'error');
            return false;
        }
        let length = $('#table-detail tr').length;
        if(length == 0){
            swal('请添加发货商品', '', 'error');
            return false;
        }
        let flag = true;
        $(".integer_num_").each(function(index){
            if($(this).val() == '' || $(this).val() > $(this).data('max') ){
                flag = false;
            }
        });
        if(!flag){
            swal('发货数量有误', '', 'error');
            return false;
        }
        return true;
    }

    $(function () {

        $('.grid-row-radio').iCheck({radioClass:'iradio_minimal-blue'});
        $('#country_id').select2({placeholder: '发货国家', allowClear: true, width: '200px'});

        $('#add-table-detail').click(function (event) {

            $('#table-detail tbody').append($('#table-detail-tpl').html().replace(/__index__/g, $('#table-detail tr').length));
            $('.gird-sku-select').select2({
                ajax: {
                    url: "/xqc/api-sys/products-vague-sku",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term,
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: $.map(data.data, function (d) {
                                return d;
                            }),
                            pagination: {
                                more: (params.page * 2) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                "allowClear":true,
                "placeholder":"输入SKU",
                "minimumInputLength":1,//最少输入多少个字符后开始查询
                escapeMarkup: function (markup) {
                    return markup;
                }
            }).on('change', function(event) {
                let objTarget = $(event.target);
                let pSkuId = objTarget.val();
                let nextTd = objTarget.closest('tr').find("td:eq(1)");
                if(!pSkuId){
                    nextTd.text('');
                }else{
                    $.getJSON('/xqc/api-sys/product-match', {'id':pSkuId}, function(data){
                        nextTd.text(data);
                    });
                }
            });
            $(".integer_num_").inputmask("integer",{
                onKeyValidation: function () {
                    if($(this).val() <= 0 || $(this).val() > $(this).data('max')){
                        $(this).val('');
                    }
                }
            });
        });
        $('#table-detail').on('click', '.table-detail-remove', function(event) {
            $(event.target).closest('tr').remove();
        });
        let getParam = function () {
            let param = {};
            param['order_no'] = $('input[name="order_no"]').val().trim();
            param['order_channel'] = $("input[name='order_channel']:checked").val();
            param['order_type'] = $("input[name='order_type']:checked").val();
            param['plat_id'] = $("input[name='plat_id']:checked").val();
            param['country_id'] = $('#country_id option:selected').val();

            let receiver = {};
            receiver['country'] = $('input[name="country"]').val().trim();
            receiver['receiver'] = $('input[name="receiver"]').val().trim();
            receiver['address'] = $('input[name="address"]').val().trim();
            receiver['state'] = $('input[name="state"]').val().trim();
            receiver['city'] = $('input[name="city"]').val().trim();
            receiver['postcode'] = $('input[name="postcode"]').val().trim();
            receiver['phone'] = $('input[name="phone"]').val().trim();
            receiver['cpf'] = $('input[name="cpf"]').val().trim();

            let detail = {};
            $('#table-detail tbody').children("tr").each(function(index){
                let tr = $(this);
                let indexArr = {};
                indexArr['psku_id'] = tr.find('select').val();
                indexArr['apply_num'] = tr.find('input').val();
                detail[index] = indexArr;
            });
            param.receiver = receiver;
            param.detail = detail;

            return param;
        };
        $('#ppc-form').on('click', function(e) {
            e.preventDefault();
            if(checkCodOForm()){
                let param = getParam();
                $.ajax({
                    method: 'post',
                    url: '/xqc/customer-delivery/delivery-demand-ajax',
                    data: {
                        _token: "{{ csrf_token() }}",
                        action: 'createCustomerOrder',
                        param: param
                    },
                    success: function (data) {
                        if (typeof data === 'object') {
                            if (data.status) {
                                toastr.success(data.message);
                                $.pjax.reload('#delivery-demand-create-form');
                            } else {
                                swal(data.message, '', 'error');
                            }
                        }
                    }
                });
            }
        });
    });
</script>
